---
title: Использование пользовательских шрифтов
description: >-
  Хотите добавить пользовательские шрифты на веб-сайт Astro? Используйте Google Fonts
  с Fontsource или добавьте шрифт по вашему выбору.
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';


Это руководство покажет вам, как добавить веб-шрифты в ваш проект и использовать их в ваших компонентах.

## Использование локального файла шрифта

Этот пример покажет, как добавить пользовательский шрифт, используя файл шрифта `DistantGalaxy.woff`.

1. Добавьте ваш файл шрифта в `public/fonts/`.
2. Добавьте следующее правило `@font-face` в ваш CSS. Это может быть в глобальном файле `.css`, который вы импортируете, в блоке `<style is:global>`, или в блоке `<style>` в конкретном макете или компоненте, где вы хотите использовать этот шрифт.

    ```css
    /* Зарегистрируйте пользовательское семейство шрифтов и сообщите браузеру, где его найти. */
    @font-face {
      font-family: 'DistantGalaxy';
      src: url('/fonts/DistantGalaxy.woff') format('woff');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    ```

3. Используйте `font-family` из правила `@font-face` для стилизации элементов в вашем компоненте или макете. В этом примере заголовок `<h1>` будет иметь примененный пользовательский шрифт, в то время как параграф `<p>` - нет.

    ```astro title="src/pages/example.astro" {9-11}
    ---
    ---

    <h1>In a galaxy far, far away...</h1>

    <p>Custom fonts make my headings much cooler!</p>

    <style>
    h1 {
      font-family: 'DistantGalaxy', sans-serif;
    }
    </style>
    ```

## Использование Fontsource

Проект [Fontsource](https://fontsource.org/) упрощает использование Google Fonts и других шрифтов с открытым исходным кодом. Он предоставляет npm-модули, которые вы можете установить для нужных вам шрифтов.

1. Найдите шрифт, который хотите использовать, в [каталоге Fontsource](https://fontsource.org/). В этом примере будет использоваться [Twinkle Star](https://fontsource.org/fonts/twinkle-star).

2. Установите пакет для выбранного вами шрифта.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install @fontsource/twinkle-star
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add @fontsource/twinkle-star
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add @fontsource/twinkle-star
      ```
      </Fragment>
    </PackageManagerTabs>

    :::tip
   Вы найдете правильное имя пакета в разделе "Быстрая установка" на странице каждого шрифта на сайте Fontsource. Оно начнется с `@fontsource/`, за которым следует название шрифта.
    :::

3. Импортируйте пакет шрифта в компонент, где хотите использовать шрифт. Обычно это нужно сделать в общем компоненте макета, чтобы шрифт был доступен на всем сайте.

   Импорт автоматически добавит правила `@font-face`, необходимые для установки шрифта.

    ```astro title="src/layouts/BaseLayout.astro"
    ---
    import '@fontsource/twinkle-star';
    ---
    ```

4. В качестве значения `font-family` используйте название шрифта, как показано в примере `body` на странице Fontsource. Это будет работать везде, где вы можете написать CSS в вашем проекте Astro.

    ```css
    h1 {
      font-family: "Twinkle Star", cursive;
    }
    ```

## Добавление шрифтов с Tailwind

Если вы используете интеграцию [Tailwind](/ru/guides/integrations-guide/tailwind/), вы можете использовать любой из предыдущих методов на этой странице для установки вашего шрифта, с некоторыми изменениями. Вы можете либо добавить [`@font-face` правило для локального шрифта](#использование-локального-файла-шрифта), либо использовать стратегию [`импорта` Fontsource](#использование-fontsource) для установки шрифта.

Чтобы добавить ваш шрифт в Tailwind:

1. Следуйте любому из приведенных выше руководств, но пропустите последний шаг добавления `font-family` в CSS.
2. Добавьте название шрифта в файл `tailwind.config.mjs`.

    Этот пример добавляет шрифт `Inter` в стек шрифтов sans-serif, со шрифтами по умолчанию из Tailwind CSS.

    ```js title="tailwind.config.mjs" ins={1,8-10}
    import defaultTheme from 'tailwindcss/defaultTheme'

    /** @type {import('tailwindcss').Config} */
    export default {
    	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
    	theme: {
    		extend: {
    			fontFamily: {
    				sans: ['Inter', ...defaultTheme.fontFamily.sans],
    			},
    		},
    	},
    	plugins: [],
    }
    ```

Теперь весь текст sans-serif (по умолчанию в Tailwind) в вашем проекте будет использовать выбранный вами шрифт, а класс `font-sans` будет также применять шрифт Inter.

Дополнительные сведения см. в [Документации Tailwind по добавлению пользовательских шрифтов](https://tailwindcss.com/docs/font-family#using-custom-values).

## Дополнительные ресурсы

- Узнайте, как работают веб-шрифты, в [Руководстве MDN по веб-шрифтам](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts).
- Сгенерируйте CSS для своего шрифта с помощью [Font Squirrel's Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator).